// 此组件用来包裹那两个组件，并且登录样式是有该组件决定
import React, { Component } from 'react';
import { Card, Tabs } from 'antd';
import styled from "styled-components"
import bg from "../../assets/bg.jpg"
import PasswdLogin from "./PasswdLogin"
import MobileLogin from "./MoblieLogin"
class Index extends Component {
  constructor(props){
    super(props)
    let jwt = sessionStorage.getItem("jwt")
    if(jwt){
      this.props.history.push("/dashboard")
    }
  }
  render() {
    const { TabPane } = Tabs;
    return (
      <Container>
        <LoginForm>
          <Card styled={{borderRadius: "19px"}}>
          <Tabs defaultActiveKey="1" centered>
            <TabPane tab="密码登录" key="1">
              <PasswdLogin/>
            </TabPane>
            <TabPane tab="短信登录" key="2">
              <MobileLogin/>
            </TabPane>
          </Tabs>
          </Card>
        </LoginForm>
      </Container>
    );
  }
}
// 整体大盒子
const Container = styled.div`
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background: url(${bg});
  background-size: 100% 100%;
  overflow: hidden;
`
// 登录表单盒子
const LoginForm = styled.div`
  width: 400px;
  margin: 0 auto;
`
export default Index;
